<template>
  <div>
    <headerXX :name="title"></headerXX>
    <div class="pull-refresh">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-empty
          v-if="list.length == 0 && !error"
          image="search"
          description="未找到数据"
        />
        <van-empty v-if="error" image="error" description="网络错误" />
        <van-list
          :immediate-check="false"
          v-model:loading="loading"
          :finished="finished"
          :error.sync="error"
          error-text="请求失败，点击重新加载"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <!-- 列表内容 -->
          <div v-if="list.length > 0">
            <div
              class="ZXDT paddingBottom10"
              style="width: 100%"
              v-for="(item, index) in list"
              :key="index"
              @click="TZNewindex(item.id)"
            >
              <div class="ZXDT_left">
                <div class="top">{{ item.noticeName }}</div>
                <div class="date">{{ item.creationTime }}</div>
              </div>
              <div class="ZXDT_right">
                <van-image
                  radius="4"
                  width="140"
                  height="72"
                  :src="item.noticeImage"
                  mode=""
                >
                </van-image>
              </div>
            </div>
          </div>

          <!-- <div v-for="(item, index) in list" :key="index" class="item">
        
        {{ item.districtName }}
      </div> -->

          <!-- 自定义错误提示（可选增强样式） -->
          <template #error>
            <div class="error-tip" @click="retryLoad">
              <van-icon name="warning" />
              <span>加载失败，点击重试</span>
            </div>
          </template>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import {
  getNewNotice2,
} from "@/api/realAssets/icsharedstation/home";
import headerXX from "../components/title.vue";
import { Toast } from "vant";
import { getpersonalInformation } from "../common/RYXX";
export default {
  components: { headerXX },
  data() {
    return {
      title: "新闻列表",
      finished: false,
      error: false,
      loading: false,
      refreshing: false,
      list: [],
      XXyz: {
        postId: JSON.parse(getpersonalInformation()).postId,
        noticeType: "2",
        id: 0,
        pageNumber: 1,
        pageSize: 10,
      },
    };
  },
  created() {},
  mounted() {
    this.onLoad()
  },
  methods: {
    //跳转到新闻详情
    TZNewindex(val) {
     this.$router.push({
        name: "i_life_News",
        query: {
          id: val, // 序列化对象
        },
      });
    },
    retryLoad() {
      this.error = false;
      this.loading = true;
      this.onLoad();
    },
    onRefresh() {
      //   list.value = [];
      this.XXyz.pageNumber = 1;
      this.XXyz.pageSize = 10;
      this.finished = false;
      this.error = false;
      this.loading = true;
      this.refreshing = true;
      this.onLoad();
    },
    onLoad() {
      this.loading = true;

      if (this.error) return; // 如果当前是错误状态，不自动触发加载
      if (this.refreshing) {
        this.list = [];
      }
      this.XXyz.postId = JSON.parse(getpersonalInformation()).postId;
      getNewNotice2(this.XXyz).then((res) => {
        if (res.resultMessage != "SUCCESS") {
          this.list = [];
          this.error = true; // 显示错误提示
          // loading.value = false;
        } else if (res.data.length == 0) {
          this.list = [];
          this.finished = true;
        } else {
          this.list = [...this.list, ...res.data];
          // list.value = res.data;
        }
        this.loading = false;
        // 判断是否已加载完所有数据
        if (this.list.length == res.pageNum) {
          this.finished = true;
        } else {
          this.XXyz.pageNumber++;
        }
        this.refreshing = false;
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import "../static/css/index.less";
@import "../static/css/GYcSS.less";
.ZXDT {
  display: flex;
  justify-content: space-between;
  width: 95% !important;
  background: #fff;
  padding: 10px;
  margin: 10px auto;
  box-sizing: border-box;
  border-radius: 10px;
  .ZXDT_left {
    .top {
      margin-bottom: 18px;
      font-size: 15px;
    }

    .date {
      color: rgb(158, 158, 158);
      font-size: 12px;
    }
  }

  .ZXDT_right {
    margin-left: 5px;
  }
}
.error-tip {
  padding: 16px;
  color: #f56c6c;
  text-align: center;
}
.error-tip .van-icon {
  margin-right: 4px;
  vertical-align: middle;
}
.item {
  padding: 12px 16px;
  /* border-bottom: 1px solid #f5f5f5; */
}
.li {
  height: auto !important;
  padding: 10px;
  box-sizing: border-box;
  display: block !important;

  .top {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>